<script setup lang="ts">
import { reactive } from "vue";
import { useAuthStore } from "../store/auth";
import { useMessage } from 'naive-ui'
import { useRouter } from "vue-router";
import { NButton, NIcon } from "naive-ui"
import { LogIn } from "@vicons/ionicons5"
const router = useRouter()
const message = useMessage()
// 关于页面内容
const loginForm = reactive({
    email: "",
    password: ""
})
const authStore = useAuthStore();

const loginAction = async () => {
    const ret = await authStore.loginByEmail({
        email: loginForm.email,
        password: loginForm.password
    });
    if (!ret.token) {
        message.warning("登录失败，用户名密码错误！")
    } else {
        message.success("登录成功！")
        router.push("/")
    }
}
</script>

<template>
    <div class="max-w-4xl mx-auto px-4  pb-12">
        <!-- 主内容 -->
        <main class="max-w-4xl mx-auto px-4 pt-16 pb-12">
            <div class="bg-white/70 backdrop-blur-sm rounded-[2.5rem] shadow-2xl p-12">
                <div class="grid md:grid-cols-2 gap-16">
                    <div>
                        <div class="mt-8 space-y-4">
                            <img class="w-full h-72 object-cover rounded-3xl shadow-xl" src="/loginLogo.jpeg" />
                            <h1 class="text-3xl font-bold text-gray-800">欢迎回来</h1>
                            <p class="text-gray-600">开启您的心理健康探索之旅</p>
                            <!-- <a href="#" class="inline-flex items-center">
                                返回首页
                            </a> -->
                        </div>
                    </div>

                    <div>
                        <div class="mb-10 text-center">
                            <img src="https://unpkg.com/lucide-static@latest/icons/lock.svg"
                                class="mx-auto w-12 h-12 p-2 bg-primary-100 rounded-xl mb-4">
                            <h2 class="text-2xl font-bold text-gray-800">账户登录</h2>
                        </div>

                        <div class="space-y-6">
                            <!-- 输入框组 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">电子邮箱</label>
                                <div class="relative">
                                    <input type="email" v-model="loginForm.email"
                                        class="w-full  outline-none bg-white/80 backdrop-blur-sm border-2 border-gray-200/50 rounded-xl py-3 px-4 focus:border-primary-600 focus:ring-1 focus:ring-primary-600 transition"
                                        placeholder="name@example.com">
                                    <img src="https://unpkg.com/lucide-static@latest/icons/mail.svg"
                                        class="absolute right-4 top-3 w-5 h-5 text-gray-400">
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                                <div class="relative">
                                    <input type="password" v-model="loginForm.password"
                                        class="w-full outline-none bg-white/80 backdrop-blur-sm border-2 border-gray-200/50 rounded-xl py-3 px-4 focus:border-primary-600 focus:ring-1 focus:ring-primary-600 transition"
                                        placeholder="••••••••">
                                    <img src="https://unpkg.com/lucide-static@latest/icons/lock.svg"
                                        class="absolute right-4 top-3 w-5 h-5 text-gray-400">
                                </div>
                            </div>

                            <div class="flex items-center justify-between">
                                <!-- <label class="flex items-center space-x-2">
                                    <input type="checkbox"
                                        class="rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                                    <span class="text-sm text-gray-600">记住我</span>
                                </label> -->
                                <!-- <a href="#" class="text-sm text-primary-600 hover:text-primary-700">忘记密码？</a> -->
                            </div>
                            <n-button color="#8a2be2" @click="loginAction">
                                <template #icon>
                                    <n-icon>
                                        <LogIn />
                                    </n-icon>
                                </template>
                                立即登录
                            </n-button>
                            <!-- 主登录按钮 -->
                            <!-- <button @click="loginAction"
                                class="w-full bg-primary-600 py-3 px-6 rounded-xl hover:shadow-md transition flex items-center justify-center hover:pointer">
                                立即登录
                            </button> -->

                            <!-- 社交登录 -->
                            <!-- <div class="relative">
                                <div class="absolute inset-0 flex items-center">
                                    <div class="w-full border-t border-gray-200"></div>
                                </div>
                                <div class="relative flex justify-center text-sm"> -->
                            <!-- <span class="px-2 bg-white/80 text-gray-500">其他登录方式</span> -->
                            <!-- </div>
                            </div> -->

                            <!-- <div class="grid grid-cols-2 gap-4">
                                <button
                                    class="flex items-center justify-center space-x-2 bg-white/80 backdrop-blur-sm p-3 rounded-xl hover:shadow-md transition">
                                    <img src="https://unpkg.com/lucide-static@latest/icons/wechat.svg"
                                        class="w-6 h-6 text-green-600">
                                    <span>微信登录</span>
                                </button>
                                <button
                                    class="flex items-center justify-center space-x-2 bg-white/80 backdrop-blur-sm p-3 rounded-xl hover:shadow-md transition">
                                    <img src="https://unpkg.com/lucide-static@latest/icons/smartphone.svg"
                                        class="w-6 h-6 text-blue-600">
                                    <span>手机验证</span>
                                </button>
                            </div> -->

                            <!-- 注册提示 -->
                            <!-- <p class="text-center text-gray-600"> -->
                            <!-- 还没有账户？ -->
                            <!-- <a href="#" class="text-primary-600 hover:text-primary-700">立即注册</a> -->
                            <!-- </p> -->
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>
</template>

<style scoped>
.about {
    text-align: center;
    padding: 2rem;
}
</style>